<template>
	<view class="page_box">
		<view class="head_box">
			<!-- tab -->
			<view class="order-nav u-flex">
				<view class="nav-item u-flex-col u-flex-1 u-col-center" v-for="nav in orderState" :key="nav.id"
					@tap="onNav(nav.type)">
					<view class="item-title">{{ nav.title }}</view>
					<text class="nav-line" :class="{ 'line-active': orderType === nav.type }"></text>
				</view>
			</view>
		</view>

		<view class="content_box" style="padding: 0 20rpx 0 20rpx;">
			<scroll-view scroll-y="true" enable-back-to-top @scrolltolower="loadMore" class="scroll-box">
				<!-- 订单列表 -->
				<view class="order-list" v-for="(order, orderIndex) in orderList" :key="order.id" @click="toDetail(order)" >
					<view class="order-head u-flex u-row-between">
						<!-- <text class="no">订单编号：{{ order.sn }}</text> -->
						<view @click.stop="jump('/pages/store/index',{id: order.storeId})" class="store-box">
							<view class="logo-box">
								<image src="https://image.hzwltb69.com/app/date/2023/detailstore.png" mode=""></image>
							</view>
							<view class="name-box">
								{{order.storeName}}
							</view>
							<view class="arr-box">
								<image src="https://image.hzwltb69.com/app/date/2023/rightarr.png" mode=""></image>
							</view>
						</view>
						 
						<text class="state">{{order.hasExpired?"（已过期）":''}}{{ onStatus(order.status) }}</text>
					</view>
					<view class="goods-order" v-for="goods in order.itemList" :key="goods.id">
						<view class="order-content">
							<ljshop-mini-card :title="goods.itemName" :image="goods.thumbnail">
								<template #describe>
									<view class="order-sku u-ellipsis-1">
										<text class="order-num">数量:{{ goods.quantity || 0 }};</text>
										<text class="order-num" v-for="(item,index) in JSON.parse(goods.specifications)" :key="index">{{ item }}</text>
									</view>
								</template>
								<template #cardBottom>
									<view class="order-price-box u-flex ">
										<text class="order-price font-OPPOSANS" v-if="goods.type != 1">￥{{ goods.price.toFixed(2) || 0 }}</text>
										<text class="order-price font-OPPOSANS" v-if="goods.type == 1">￥{{ goods.price.toFixed(2) || 0 }}+{{ goods.exchangePoint}}积分</text>
										<button class="u-reset-button status-btn"
											v-if="goods.returnNum>0" @tap.stop="toAfterSale(goods.id)" >已申请售后</button>
									</view>
								</template>
							</ljshop-mini-card>
						</view>
					</view>
					<view class="order-bottom">
						<view class="all-msg u-flex font-OPPOSANS"  v-if="order.type!='EXCHANGE'"> 
							订单金额 ：￥{{ order.amount }} 
						</view>
						<view class="all-msg u-flex font-OPPOSANS"  v-if="order.type=='EXCHANGE'">
							订单金额 ：￥{{ order.amount }}+{{ order.exchangePoint }}积分 
						</view>
						<!-- 按钮 -->
						<view class="btn-box u-flex" >
							<button
                  v-if="order.trackingNo"
                  @tap.stop="onExpress(order)"
								class="u-reset-button obtn1 wu-btn">
								物流信息
							</button>
								<button @tap.stop="jump('/pages/order/detail', orderType == 'SHIPPED' || orderType == 'COMPLETED' ?  { id: order.id,deliveryCorpCode:order.deliveryCorpCode,trackingNo:order.trackingNo,itemList:order.itemList} : { id: order.id })"
									class="u-reset-button obtn1 info-btn">
									订单详情
								</button>
						</view>
					</view>
				</view>

				<!-- 空白页 -->
				<ljshop-empty
				style="margin: 30rpx;"
				v-if="isEmpty" image="https://image.hzwltb69.com/app/date/2023/notOrder.png"
					tipText="暂无订单"></ljshop-empty>
				<!-- 更多 -->
				<u-loadmore v-show="orderList.length" height="80rpx" :status="loadStatus" icon-type="flower"
					color="#ccc" />
					<shLoginBox v-if="!uid" @loginsuccess="loginsuccess" ></shLoginBox>
			</scroll-view>
		</view>
	</view>
</template>

<script>
	import shLoginBox from '../index/components/sh-login-box.vue'
	export default {
		components: {
			shLoginBox
		},
		data() {
			return {
				isEmpty: false,
				uid: uni.getStorageSync("UId"),
				loadStatus: 'loadmore', //loadmore-加载前的状态，loading-加载中的状态，nomore-没有更多的状态
				currentPage: 1,
				lastPage: 1,
				orderType: 'ALL',
				orderList: [],
				orderState: [{
						id: 0,
						title: '全部',
						type: 'ALL'
					},
					{
						id: 1,
						title: '待付款',
						type: 'PENDING_PAYMENT'
					},
					{
						id: 2,
						title: '待发货',
						type: 'PENDING_SHIPMENT'
					},
					{
						id: 3,
						title: '待收货',
						type: 'SHIPPED'
					},
					{
						id: 4,
						title: '已完成',
						type: 'COMPLETED'
					},
					
					// {
					// 	id: 5,
					// 	title: '已取消',
					// 	type: 'CANCELED'
					// }
				],
			};
		},
		onLoad() {
			if (this.$Route.query.type) {
				this.orderType = this.$Route.query.type;
			}
		},
		onShow() {
			this.orderList = [];
			this.currentPage = 1;
			this.lastPage = 1;
			this.getOrderList();
		},
		methods: {
			loginsuccess(){
				this.orderList = [];
			    this.currentPage = 1;
			    this.lastPage = 1;
			    this.getOrderList();
			},
			change(e){
				this.current = e
			},
			toDetail(e){
				this.$Router.push({
					path: '/pages/goods/detail',
					query: {
						id:e.itemList[0].productId
					}
				});
			},
			jump(path, parmas) {
				//console.info(path)
				this.$Router.push({
					path: path,
					query: parmas
				});
			},

			// tab切换
			onNav(id) {
				if (this.orderType !== id) {
					this.orderType = id;
					this.orderList = [];
					this.currentPage = 1;
					this.lastPage = 1;
					this.getOrderList();
				}
			},
			goStore(e){
				console.log(e);
			},
			// 订单列表
			getOrderList() {
				let that = this;
				that.loadStatus = 'loading';
				that.$http('order.index', {
					status: that.orderType,
					current: that.currentPage,
					pageSize:10,
					UId:uni.getStorageSync("UId")
				}, '加载中...').then(res => {					 
					if (res.code == 1) {
						if(res.data.length.length<=20){
							this.hasMore=false
						}
						else{
							this.hasMore=true
						}
						if(that.currentPage == 1){
							if(res.data.length>0){
								that.orderList = res.data;
								if(res.data.length < 10){
									that.loadStatus = 'nomore'
								}
							}
						}
						else{
							if(res.data.length>0){
								that.orderList = that.orderList.concat(res.data)
								that.loadStatus = 'loadmore'
							}else{
								that.loadStatus = 'nomore';
							}
						}
						
						//console.info(JSON.stringify(that.orderList))
						that.isEmpty = !that.orderList.length;
					}
					else{
						
					}
				});
			},

			// 加载更多
			loadMore() {
				if (this.hasMore) {
					this.currentPage += 1;
					this.getOrderList();
				}
			},

			// 删除订单
			onDelete(orderId, orderIndex) {
				let that = this;
				uni.showModal({
					title: '删除订单',
					content: '确定要删除这个订单么？',
					cancelText: '取消',
					confirmText: '删除',
					success: res => {
						if (res.confirm) {
							that.$http('order.deleteOrder', {
									orderId: orderId,
									UId:uni.getStorageSync("UId")
								},
								'删除中...'
							).then(res => {
								if (res.code === 1) {
									that.$u.toast(res.msg);
									that.orderList.splice(orderIndex, 1);
								}
							});
						}
					}
				});
			},

			// 取消订单
			onCancel(id, orderIndex) {
				let that = this;
				that.$http('order.cancel', {
						id: id
					},
					'取消中...'
				).then(res => {
					if (res.code === 1) {
						that.$u.toast(res.msg);
						this.orderList.splice(orderIndex, 1);
					}
				});
			},
			toAfterSale(id){
				uni.showLoading({
					
				})
				 
				let that = this;
				that.$http('order.getbyitem', {
					orderItem: id,
				}).then(res => {

						 this.jump('/pages/order/after-sale/detail', { aftersaleId: res.aftersalesItem.id })
				});
			},

			// 立即购买
			onPay(id) {
				uni.navigateTo({
					url: `/pages/order/payment/method?orderId=${id}&orderType=goods`
				});
			},

			// 查看物流
			onExpress(order) {
				let that = this;
				this.jump('/pages/order/express/express-detail', {
				  deliveryCorpCode: order.deliveryCorpCode,
				  trackingNo: order.trackingNo,
				  phone: order.phone,
				  quantity: order.quantity,
				  img:order.itemList[0].thumbnail,
				  name:order.itemList[0].name,
				});
			},
			onStatus(status){
        // 状态0=等待付款 1:等待审核 2=等待发货 3=已发货 4=已收货 5=已完成 6=已失败 7=已取消 8=已拒绝 9=已退款
        let statusObj={
          0:'待付款',
          1:'待审核',
          2:'待发货',
          3:'已发货',
          4:'已收货',
          5:'已完成',
          6:'已失败',
          7:'已取消',
          8:'已拒绝',
          9:'已退款',
        }
					 return  statusObj[status]
				
			}
		}
	};
</script>

<style lang="scss">
	.order-nav {
		background: #fff;
		height: 80rpx;
		
		.nav-item {
			flex: 1;

			.item-title {
				font-size: 30rpx;

				font-weight: 400;
				color: rgba(51, 51, 51, 1);
				line-height: 76rpx;
			}

			.nav-line {
				width: 100rpx;
				height: 8rpx;
				background: #fff;
			}

			.line-active {
				background: rgba(230, 184, 115, 4);
			}
		}
	}

	.order-list {
		// background: pink;
		border-radius: 20rpx;
		margin: 15rpx 5rpx;
		box-shadow: 0 0 10rpx -7rpx;
		.order-bottom {
			padding-bottom: 20rpx;

			.btn-box {
				justify-content: flex-end;
			}

			.all-msg {
				font-size: 26rpx;
				color: black;
				justify-content: flex-end;
				margin-bottom: 10rpx;
				padding: 0 30rpx;

				.all-unit {
					font-size: 20rpx;
				}

				.all-money {
					font-size: 26rpx;
					color: #333;
					font-weight: 500;

					&::before {
						content: '￥';
						font-size: 20rpx;
					}
				}
			}
			
			.obtn1 {
				width: 160rpx;
				line-height: 60rpx;
				background: rgba(238, 238, 238, 1);
				border-radius: 30rpx;
				font-size: 26rpx;

				font-weight: 400;
				color: rgba(51, 51, 51, 1);
				margin-right: 20rpx;
				padding: 0;
			}
			.wu-btn{
				background: #fff !important;
				border: 1px solid rgba(238, 238, 238, 1);
				line-height: 59rpx !important;
			}
			.info-btn{
				background: #f97928;
				color: #fff;
			}
			.obtn2 {
				width: 160rpx;
				line-height: 60rpx;
				background: linear-gradient(90deg, rgba(233, 180, 97, 1), rgba(238, 204, 137, 1));
				box-shadow: 0px 7rpx 6rpx 0px rgba(229, 138, 0, 0.22);
				border-radius: 30rpx;
				margin-right: 20rpx;
				font-size: 26rpx;

				font-weight: 400;
				color: #fff;
				padding: 0;
			}

			.obtn3 {
				background: #ffeeee;
				color: #e50808;
				width: 160rpx;
				line-height: 60rpx;
				border-radius: 30rpx;
				margin-right: 20rpx;
				font-size: 26rpx;
				font-weight: 400;
				padding: 0;
			}
		}

		.order-head {
			padding: 0 25rpx;
			height: 77rpx;
			// border-bottom: 1rpx solid #dfdfdf;
			.no {
				font-size: 26rpx;
				color: #999;
			}

			.state {
				font-size: 26rpx;
				color: #f9731e;
			}
			.store-box{
				display: flex;
				align-items: center;
				image{
					width: 40rpx;
					height: 40rpx;
				}
				.logo-box{
					display: flex;
					align-items: center;
				}
				.name-box{
					margin-left:10rpx;
					margin-right: 10rpx;
					font-size: 30rpx;
				}
				.arr-box{
					display: flex;
					align-items: center;
					image{
						width: 20rpx;
						height: 20rpx;
					}
				}
			}
		}
		.goods-order {
			// border-bottom: 1px solid rgba(223, 223, 223, 0.5);
			padding: 20rpx 20rpx 0;
			margin-bottom: 20rpx;

			.order-content {
				padding-bottom: 20rpx;

				.order-sku {
					font-size: 24rpx;

					font-weight: 400;
					color: rgba(153, 153, 153, 1);
					width: 450rpx;
					margin-bottom: 20rpx;

					.order-num {
						margin-right: 10rpx;
					}
				}

				.order-price-box {
					.status-btn {
						height: 32rpx;
						border: 1rpx solid #f9731e;
						border-radius: 15rpx;
						font-size: 20rpx;
						font-weight: 400;
						height: 30rpx;
						line-height: 30rpx;
						color: #f9731e;
						padding: 0 10rpx;
						margin-left: 20rpx;
						background: rgba(233, 183, 102, 0.16);
					}

					.order-price {
						font-size: 26rpx;

						font-weight: 600;
						color: rgba(51, 51, 51, 1);
					}
				}
			}
		}
	}
	::v-deep .goods-title{
		font-size: 30rpx !important;
	}
</style>
